<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,ininial=1,maximum=1,user-scalable=no">
    <script type="text/javascript" src="./js/winResponsive.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <div class="header">
        <div class="top">
            <div class="box clearfix">
                <div class="left">
                    <a href=""><img src="images/i-top-s.png" alt=""></a>
                    <a href=""><img src="images/i-top-mail.png" alt=""></a>
                    <a href=""><img src="images/i-top-phone.png" alt=""></a>
                </div>
                <div class="right">
                    <a href="">伊森官方旗舰网站欢迎您的光临</a>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="box clearfix">
                <div class="log">
                    <a href="">
                        <img src="images/log.png" alt="">
                    </a>
                </div>

                <nav>
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="">关于伊森</a></li>
                        <li><a href="">产品系列</a></li>
                        <li><a href="">售后服务</a></li>
                        <li><a href="">联系伊森</a></li>
                    </ul>
                </nav>

            </div>
        </div>
    </div>

    <div class="body">
        <div class="top">
            <div class="box top-box">
                <ul class="lunbo">
                    <li>
                        <a href="">
                            <img class="picture" src="images/i-background.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img class="picture" src="images/i-background-1.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img class="picture" src="images/i-background-2.jpg" alt="">
                        </a>
                    </li>
                    <li>
                        <a href="">
                            <img class="picture" src="images/i-background-3.jpg" alt="">
                        </a>
                    </li>
                </ul>
                <div class="top-left">&lt;</div>
                <div class="top-right">&gt;</div>
                <div class="btn"></div>
            </div>
        </div>

        <div class="hot">
            <div class="title">
                <div>
                    <p>热销款</p>
                    <p>Hot style</p>
                </div>
            </div>
            <div class="box">
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
            </div>
            <div class="more">
                <a href="">查看更多</a>
            </div>
        </div>
        <div class="middle">
            <div class="box">
                <a href="">
                    <img src="images/i-body-background.jpg" alt="">
                </a>
                <div>
                    <p>伊森</p>
                    <p>为你打造最好的腕表</p>
                </div>
            </div>
        </div>
        <div class="hot">
            <div class="title">
                <div>
                    <p>热销款</p>
                    <p>Hot style</p>
                </div>
            </div>
            <div class="box">
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
                <a href="">
                    <img src="./images/i-body-Watch.jpg" alt="">
                    <p>伊森男腕表</p>
                    <p>伊森男士腕表时尚型</p>
                </a>
            </div>
            <div class="more">
                <a href="">查看更多</a>
            </div>
        </div>
        
        <div class="bottom">
            <div class="left">
                <img src="./images/i-bottom-1.jpg" alt="">
                <img src="./images/i-bottom-2.jpg" alt="">
                <img src="./images/i-bottom-3.jpg" alt="">
                <img src="./images/i-bottom-4.jpg" alt="">
            </div>
            <div class="right">
                <img src="./images/i-bottom-right.jpg" alt="">
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="box">
            <div class="left">
                <p>伊森腕表品牌</p>
                <a href="">品牌简介</a>
                <a href="">总裁致辞</a>
                <a href="">员工关怀</a>
                <a href="">招商加盟</a>
                <a href="">人才招聘</a>
            </div>
            <div class="middle">
                <p>伊森腕表品牌</p>
                <a href="">品牌简介</a>
                <a href="">总裁致辞</a>
                <a href="">员工关怀</a>
                <a href="">招商加盟</a>
                <a href="">人才招聘</a>
            </div>
            <div class="right">
                <p>伊森腕表品牌</p>
                <a href="">品牌简介</a>
                <a href="">总裁致辞</a>
                <a href="">员工关怀</a>
                <a href="">招商加盟</a>
                <a href="">人才招聘</a>
            </div>
        </div>
        <div class="bottom clearfix">
            <p>Copyrigh2016伊森腕表版权所有</p>
            <p>粤ICP备1234567号</p>
            <p>贵宾专线：400-200-9999</p>
            <p>地址：广州市海珠区XX大厦1808室</p>
        </div>
    </div>
</body>
</html>

<script>

    var box=document.querySelector(".top-box");
    var lunbo=document.querySelector(".lunbo");
    var lunboLi=document.querySelectorAll(".lunbo li");
    var btn=document.querySelector(".btn");
    var topLeft=document.querySelector(".top-left");
    var topRight=document.querySelector(".top-right");


    var lunboLiLength=lunboLi.length;

    console.log(box)
    var number=1;
    
    //添加span
    for(var i=0;i<lunboLiLength;i++){
        var span = document.createElement('span');
        //console.log(span)
        span.innerHTML=i+1;
        btn.appendChild(span);
        //console.log(btn.appendChild(span));
    }
    var spans = document.querySelectorAll('.btn span');
    spans[0].className="cur";


    function run(){
        if(number==lunboLiLength){
            number=0;
        }
        lunbo.style.left=-1*number*13.66+"rem";
        for(var i=0;i<lunboLiLength;i++){
            spans[i].className="";
        }
        spans[number].className="cur";
        number++;
    }
    var T=setInterval(run,1500);
    
    
    for(var i=0;i<lunboLiLength;i++){
        spans[i].index=i;
        spans[i].onclick=function(){
            lunbo.style.left=-1*this.index*13.66+"rem";
            for(var i=0;i<lunboLiLength;i++){
                spans[i].className="";
            }
            this.className="cur";
            number=this.index;
        }
        console.log(spans[i])
    }

    topLeft.onclick=function(){
        
        if(number==0){
            number=lunboLiLength;
        }
        number--;
        lunbo.style.left=-1*number*13.66+"rem";
        for(var i=0;i<lunboLiLength;i++){
            spans[i].className="";
        }
        spans[number].className="cur";
        
    }
    topRight.onclick=function(){
        
        if(number==lunboLiLength-1){
            number=-1;
        }
        number++;
        lunbo.style.left=-1*number*13.66+"rem";
        for(var i=0;i<lunboLiLength;i++){
            spans[i].className="";
        }
        spans[number].className="cur";
        
    }

    

    box.onmouseover=function(){
        clearInterval(T);
    }
    box.onmouseout=function(){
        T=setInterval(run,2000);
    }

    console.log(T)

</script>